<template>
	<view class="m-framework">
		<u-navbar class="navbar" :fixed="false" :title="navTitle" :autoBack="false" :safeAreaInsetTop="true"
			style="width: 100%;" :titleStyle="{ fontSize: '15px', fontWeight: 'bold' }">
			<view class="LeftBox" slot="left">
				<view class="x-f">
					<u-icon name="home-fill" color="#ffffff" size="28" @click="OpenPageRoute"></u-icon>
					<view class="x-f" style="font-size: 15px;color: #fff;margin-left: 10px;">
						<!-- <text> {{MesBasicInfo.warehouse?MesBasicInfo.warehouse.EquipmentName:''}}</text> -->
						<text>【{{MesBasicInfo.EmplName}}】</text>
						<!-- <text>【{{MesBasicInfo.ShiftObj?MesBasicInfo.ShiftObj.ShiftName:''}}】</text> -->
					</view>
				</view>
			</view>

			<view class="RightBox" slot="right">
				<view class="x-f RightBoxView">
					<view>
						当前时间:{{currentTime}}
					</view>

					<slot name="navRight">
						<button class="CancelBtn" @click="out()">退出</button>
					</slot>
				</view>
			</view>
		</u-navbar>

		<view class=" workbench_top" style="padding: 0.5% 2% 0 2%;">
			<view class="x-f workbench_left1">


				<scroll-view scroll-x class="scroll-container" :scroll-left="scrollLeft" scroll-with-animation>
					<view class="workbench_left_view" v-for="(item,index) in tabsList" :key="index"
						:class="{ 'active-tab': TabsCurrent === index }" @click="handleTabClick(index)">
						<view style="display: flex;align-items: center;height: 100%;">
							{{item.name}}
							<uni-icons color="#3c9cff" v-show="item.ClockStatusName === '下班打卡'" fontFamily="CustomFont"
								:size="24">{{ $utils.toUniCode('&#xe601;') }}</uni-icons>
							<uni-icons color="#b0b2b3" v-show="item.ClockStatusName === '上班打卡'" fontFamily="CustomFont"
								:size="24">{{ $utils.toUniCode('&#xe602;') }}</uni-icons>

						</view>
					</view>
				</scroll-view>

			</view>

			<view class="workbench_right" v-show='ClockStatusTitle!="试模"'>
				<u-button class="workbench_right_3" text="切换机台" color="#dbb56a" @click="changeEquipment"></u-button>
			</view>
		</view>
		<view class="workbench">
			<view class=" workbench_top" style="padding: 0 2% 0.5% 2%;">
				<view class="workbench_left">
					<u-tag class="workbench_u-tag" size="large" v-for="(item,index) in routeData" :text="item.Name"
						type="info" :closable='true' @close="ToLevel(item,index)" @click="ToLevel(item,index)"></u-tag>
				</view>
				<view class="workbench_right" v-show='ClockStatusTitle=="首页"'>
					<u-button class="workbench_right_3" type="primary"
						@click="changeClockStatus()">{{ClockStatusName}}</u-button>
					<u-button class="workbench_right_3" text="切换白夜班" color="#dbb56a" @click="changeClass"></u-button>

				</view>
			</view>


			<u-popup :show="machineShow" mode="bottom" @open="machineShowOpen" @close='machineShowClose'
				style="z-index: 9999999 !important;">

				<view class="popup_equipment_container">
					<view class="line-container">
						<view class="line-grid">
							<view v-for="(item,index) in getEquipmentList" @click="closetow(item)" class="line-item"
								:style="{ 
							    backgroundColor: isDisabled(item) ? '#b0b2b3' : '#dbb56a',
							  }">
								<text>{{ item.EquipmentName }}</text>
							</view>
						</view>
					</view>
				</view>
			</u-popup>

			<u-action-sheet :actions="classActions" :show="classShow" @select="classClick"></u-action-sheet>

			<m-loading :text="loadingName" v-model="disabled" :showClose="false"
				maskBackgroundColor="rgba(0,0,0,0.3)"></m-loading>

			<u-modal :show="modalshow" :title="modaltitle" width="400px" @confirm='modalconfirm'>
				<view class="slot-content">
					{{modalcontent}}
				</view>
			</u-modal>
			<u-toast ref="uToast"></u-toast>
			<slot name="workbench">
			</slot>
		</view>

		<view class="m-framework_main y-f">
			<slot name="content">
				<view class="y-f m-framework_main_box">
					<view class="y-f m-framework_main_box-border">
						<slot></slot>
					</view>
				</view>
			</slot>
		</view>


		<view class="m-framework_bottom x-f" :style="$utils.disposeSafeBottomFun()">
			<slot name="bottom">

				<u-navbar :fixed="false" :autoBack="false" :safeAreaInsetTop="false" :height="30"
					:bgColor="bgColor + '!important'" style="width: 100%;">

					<view class="m-framework_bottom-version bottomText" slot="left" v-show="version">
						<slot name="bottomLeft">
							<text>当前版本：</text>
							<text>{{version}}</text>
						</slot>
					</view>

					<view class="m-framework_bottom-company bottomText" slot="center">
						<slot name="bottomCenter">

						</slot>
					</view>

					<view class="m-framework_bottom-status bottomText x-c" slot="right">
						<slot name="bottomRight">
							<view class="x-f">
								<text>当前登录:</text>
								<text>【{{netWorkinfo.networkType}}】</text>
							</view>

							<view class="x-f" style="margin-left: 4px;">
								<text>当前网络:</text>
								<view style="width: 14px;height: 14px;border-radius: 9999px;"
									:style="{backgroundColor: netWorkinfo.isConnected ? '#63df5a' : '#ff3029'}"></view>
							</view>
						</slot>
					</view>
				</u-navbar>
			</slot>
		</view>
		<uni-popup ref="popup_route" class="MainPopup" type="left" background-color="rgba(0,0,0,0.4)"
			mask-background-color="rgba(0,0,0,0.1)" @close="closeRoutePopup">
			<view class="y-f routePopup" style="width: 30vw;height: 100vh;">
				<slot name="leftPopup">
					<u-tag bgColor='#fff' color='#000' class="leftPopup_u-tag" size="large"
						v-for="(item,index) in routeData" :text="item.Name" type="info" :closable='true'
						@close="ToLevel(item,index)" @click="ToLevel(item,index)"></u-tag>
				</slot>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		name: "st-mc-framework",
		props: {
			navTitle: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#51d0d0'
			},

		},
		data() {
			return {
				disabled: false,

				loadingName: '正在加载中……',
				scrollLeft: 0, // 滚动位置

				ModuleData_select: [],
				TabsCurrent: null,
				tabsList: [],
				modalshow: false,
				modaltitle: '提示',
				modalcontent: '',

				scrollLiftHeight: uni.getSystemInfoSync(),
				initData: {},
				initObj: {},
				ModuleID: null,

				version: null, // 本机版本号
				// networkType: null,
				// isConnected: true,
				MesBasicInfo: {}, // 控制台基础信息
				MesBasicInfoList: [],
				machineShow: false,
				getEquipmentList: [],

				classShow: false,
				classActions: [{
						name: '白班',
						id: '1'
					},
					{
						name: '夜班',
						id: '2'
					}
				],

				ClockStatus: '',
				ClockStatusName: '上班打卡',
				ClockStatusTitle: '首页',
				isTabSwitching: false,

			};
		},

		created() {
			let that = this;

			that.$store.state.GuyueModule.MesBasicInfoList.forEach((item, index) => {
				that.addClockStatus(item);
			})

			// 获取版本 
			that.version = plus.runtime.version;

			that.ModuleID = that.$store.state.appConfigInfo.ActiveModule.ModuleID
			that.FWorkshopID = that.$store.state.appConfigInfo.ActiveModule.treeTypes[0].pages[0].FWorkshopID
			that.changeMesBasicInfoAll()
			that.GetTabsList()
			var index = that.MesBasicInfoList.findIndex((item) => item.warehouse.EquipmentName == that.MesBasicInfo
				.warehouse.EquipmentName)
			that.GetTabsCurrent(index)
			that.GetAddClockStatus()
			that.ClockStatusTitle = that.MesBasicInfo.Status.ClockStatusTitle
			if (that.MesBasicInfo && that.MesBasicInfo.ShiftObj) {
				that.MesBasicInfo.ShiftObj.ShiftName = that.MesBasicInfo.ShiftObj.ShiftName ?? '白班';
				that.MesBasicInfo.ShiftObj.ShiftID = that.MesBasicInfo.ShiftObj.ShiftID ?? 1;
			}
			if (that.MesBasicInfo && that.MesBasicInfo.warehouse) {
				that.addClockStatus();
			}

			if (that.ClockStatusTitle == "首页" && that.MesBasicInfo.Initialstate == '初次') {
				that.machineShow = !!(that.MesBasicInfo.warehouse?.EquipmentName) === false;
			}

			that.$store.dispatch('GuyueModule/startUpdatingTime'); // 组件创建时启动时间更新 
			// 注册网络状态变化监听器  
			// uni.onNetworkStatusChange(that.onNetworkStatusChange);
		},

		computed: {
			MesBasicInfoData() {
				return this.$store.state.GuyueModule.MesBasicInfo || {}
			},
			showDisabled() {
				return this.$store.state.GuyueModule.Tabdisabled
			},
			currentTime() {
				return this.$store.state.GuyueModule.currentTimeString;
			},
			routeData() {


				return this.$store.state.GuyueModule.ModuleData_select;
			},
			netWorkinfo() {
				return this.$store.state.systemConfig.netWorkinfo;
			},

			scheduledEquipmentNames() {
				return this.tabsList.map(item => item.title)
			}
		},
		watch: {
			showDisabled: {
				handler(nval, oval) {
					var that = this

					this.disabled = this.$store.state.GuyueModule.Tabdisabled
				},
				deep: true,
				immediate: true
			},
			MesBasicInfoData: {
				handler(newVal) {
					var that = this
					that.MesBasicInfo = newVal
					that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
					that.GetAddClockStatus()

					that.ModuleData_select = this.MesBasicInfo.ModuleData_select

					that.GetTabsList()
					var index = that.MesBasicInfoList.findIndex((obj) => obj.warehouse.EquipmentName == that
						.MesBasicInfo.warehouse.EquipmentName)
					that.GetTabsCurrent(index)

				},
				deep: true // 深度监听
			},
			netWorkinfo: {
				handler(nval, oval) {

				},
				deep: true,
				immediate: true
			},
			routeData: {

				handler(nVal, oVal) {


					if (nVal.length > oVal.length) { // 层级往下

					} else if (nVal.length < oVal.length) { // 层级往上


					} else { // 当前层级

					}

				}
			}

		},
		onUnload() {
			// 取消网络状态变化监听器  
			// uni.offNetworkStatusChange(this.onNetworkStatusChange);
		},
		beforeDestroy() {
			this.$store.dispatch('GuyueModule/stopUpdatingTime'); // 组件销毁前停止时间更新  
		},
		onShow() {
			var that = this

		},

		methods: {
			ChangeTabsClick() {

				this.GetTabsList()
			},
			GetTabsList() {
				var that = this

				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;


				that.tabsList = that.MesBasicInfoList.length > 0 ? that.MesBasicInfoList.map(item => ({
					name: item.warehouse.EquipmentName + '【' + item.ShiftObj.ShiftName + '】', // 正确返回对象
					title: item.warehouse.EquipmentName, // 正确返回对象
					ClockStatusName: item.Status.ClockStatusName
				})) : []



				that.$forceUpdate()
			},
			async handleTabClick(index) {
				var that = this
				if (that.disabled == false) {
					// 立即禁用点击
					that.disabled = true
					that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
					var BasicInfo = this.$store.state.GuyueModule.MesBasicInfo

					var oldMesBasicInfoLength = BasicInfo.ModuleData_select[BasicInfo.ModuleData_select.length - 1]
						.length - BasicInfo.ModuleData_select[0].length




					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'Tabdisabled',
						data: that.disabled
					});
					// 如果需要滚动到选中项
					that.scrollLeft = index * 120 // 120为每个tab的宽度
					await that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfo',
						data: that.MesBasicInfoList[index]
					});
					await that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfoList',
						data: that.MesBasicInfoList
					})

					await that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'ModuleData_select',
						data: that.$store.state.GuyueModule.MesBasicInfo.ModuleData_select
					})

					await that.$nextTick();
					that.ModuleData_select = that.MesBasicInfo.ModuleData_select
					that.GetTabsCurrent(index)
					that.changeMesBasicInfoAll()
					that.GetAddClockStatus()
					that.changeModuleData_select(oldMesBasicInfoLength)
					// 2秒后恢复点击
					setTimeout(() => {
						that.disabled = false
						that.$store.commit('GuyueModule/ChangeAndSetStateData', {
							Name1: 'Tabdisabled',
							data: that.disabled
						});
					}, 2000)
				}
			},
			GetTabsCurrent(index) {
				var that = this
				that.TabsCurrent = index
			},
			GetAddClockStatus() {
				var that = this
				that.MesBasicInfo = that.$store.state.GuyueModule.MesBasicInfo;
				that.ClockStatus = that.MesBasicInfo.Status.ClockStatus
				that.ClockStatusName = that.MesBasicInfo.Status.ClockStatusName
			},
			changeMesBasicInfoAll() {
				var that = this
				that.MesBasicInfo = that.$store.state.GuyueModule.MesBasicInfo;
				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
			},
			changeModuleData_select(oldMesBasicInfoLength) {
				var that = this
				var BasicInfo = this.$store.state.GuyueModule.MesBasicInfo

				let newData = JSON.parse(JSON.stringify(BasicInfo.ModuleData_select));
				const lastItem = newData[newData.length - 1];

				that.AddModuleData_selectClick('tab')

			},

			AddModuleData_selectClick(title) {
				uni.$emit('AddModuleData_select', title);
				this.$emit('AddModuleData_select', title);

			},
			isDisabled(item) {
				return this.scheduledEquipmentNames.includes(item.EquipmentName)
			},

			ClickchangeMesBasicInfo(MesBasicInfo, MesBasicInfoList, oldMesBasicInfoLength) {
				var that = this


				that.MesBasicInfo = MesBasicInfo
				that.MesBasicInfoList = MesBasicInfoList

				that.GetTabsList()

				that.TabsClick1(MesBasicInfo.warehouse.EquipmentName, oldMesBasicInfoLength)

			},
			TabsClick1(title, oldMesBasicInfoLength) {
				var that = this
				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
				if (that.MesBasicInfoList.length > 0) {
					var index = that.MesBasicInfoList.findIndex((obj) => obj.warehouse.EquipmentName == title)
					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfo',
						data: that.MesBasicInfoList[index]
					});
					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfoList',
						data: that.MesBasicInfoList
					})

					that.GetTabsCurrent(index)
					that.changeMesBasicInfoAll()
					that.ModuleData_select = that.$store.state.GuyueModule.MesBasicInfo.ModuleData_select

				}
				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: that.MesBasicInfo.ModuleData_select
				})
				uni.$emit('AddModuleData_select', oldMesBasicInfoLength);
				this.$emit('AddModuleData_select', oldMesBasicInfoLength);

			},


			changeClockStatus() {
				var that = this
				that.Request.request('confirmClock', {
					EquipmentID: that.MesBasicInfo.warehouse.EquipmentID,
					EmplName: that.$store.state.UserInfo.EmplName,
					ClockStauts: that.ClockStatus,
					ShiftID: that.MesBasicInfo.ShiftObj.ShiftID,
					EmplID: that.$store.state.UserInfo.EmplID
				}, (ret) => {

					that.$refs.uToast.show({
						title: '保存',
						type: 'success',
						message: ret.data.ds[0].Column1
					})
					that.addClockStatus()
				})
			},
			addClockStatus(str) {
				var that = this
				var obj = {
					EmplID: that.$store.state.UserInfo.EmplID,
				}
				if (str) {
					obj = {
						...obj,
						ShiftID: str.ShiftObj.ShiftID,
						EquipmentID: str.warehouse.EquipmentID,
					}
				} else {
					that.MesBasicInfo = that.$store.state.GuyueModule.MesBasicInfo;
					obj = {
						...obj,
						ShiftID: that.MesBasicInfo.ShiftObj.ShiftID,
						EquipmentID: that.MesBasicInfo.warehouse.EquipmentID,
					}
				}

				that.Request.request('judegClockStatus', obj, (ret) => {

					if (!str) {
						const newEquipment = JSON.parse(JSON.stringify(that.MesBasicInfo));
						newEquipment.Status.ClockStatus = ret.data.ds[0].ClockStatus
						if (ret.data.ds[0].ClockStatus == 0) {
							newEquipment.Status.ClockStatusName = '上班打卡'
						} else {
							newEquipment.Status.ClockStatusName = '下班打卡'
						}
						var index = that.MesBasicInfoList.findIndex((obj) => obj.warehouse.EquipmentName == that
							.MesBasicInfo.warehouse.EquipmentName)
						that.MesBasicInfoList[index] = newEquipment;
						that.$store.commit('GuyueModule/ChangeAndSetStateData', {
							Name1: 'MesBasicInfo',
							data: newEquipment
						})
						that.$store.commit('GuyueModule/ChangeAndSetStateData', {
							Name1: 'MesBasicInfoList',
							data: that.MesBasicInfoList
						})

					} else {
						str.Status.ClockStatus = ret.data.ds[0].ClockStatus
						if (ret.data.ds[0].ClockStatus == 0) {
							str.Status.ClockStatusName = '上班打卡'
						} else {
							str.Status.ClockStatusName = '下班打卡'
						}
						var index = that.MesBasicInfoList.findIndex((obj) => obj.warehouse.EquipmentName == str
							.warehouse.EquipmentName)
						that.MesBasicInfoList[index] = str;
						that.$store.commit('GuyueModule/ChangeAndSetStateData', {
							Name1: 'MesBasicInfoList',
							data: that.MesBasicInfoList
						})
					}
					that.GetTabsList()
					that.GetTabsCurrent(index)
					that.GetAddClockStatus()
				})
			},
			changeClass() {
				this.classShow = true
			},
			classClick(e) {
				var that = this
				const newEquipment = JSON.parse(JSON.stringify(that.MesBasicInfo));
				newEquipment.ShiftObj.ShiftName = e.name
				newEquipment.ShiftObj.ShiftID = e.id
				that.classShow = false
				that.MesBasicInfo = newEquipment
				that.addClockStatus()


			},

			DeviceshowClick() {
				uni.$emit('DeviceshowClick', '首次');
				this.$emit('DeviceshowClick', '首次');
			},
			exitButton() {
				uni.$emit('exitButton');
				this.$emit('exitButton');
			},

			out() {
				var that = this
				that.LogOut()
			},
			modalconfirm() {
				this.modalshow = false

			},
			LogOut() {
				var that = this
				uni.$off('changeLevel');
				var moduleData_basic = this.$store.state.GuyueModule.moduleData_basic
				var newEquipment = {
					...that.$store.state.GuyueModule.MesBasicInfo
				};
				var MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;

				newEquipment.ModuleData_select = moduleData_basic;
				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfo',
					data: newEquipment
				});

				MesBasicInfoList.forEach(item => {
					item.ModuleData_select = moduleData_basic
				})
				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfoList',
					data: that.MesBasicInfoList
				});
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: moduleData_basic
				});
				let routes = getCurrentPages(); //当前页面栈

				if (routes.length == 1) {
					uni.navigateBack({
						delta: routes.length,
						success() {
							plus.screen.lockOrientation('portrait-primary');
						}
					})
				} else {
					var url = '/st_mes_zs/common/PdfPreview'
					uni.navigateTo({
						url: url,
						animationType: 'none', // 动画类型
					});
				}
			},
			OpenPageRoute() { // 点击navLeft图表
				// 打开弹层
				this.$refs.popup_route.open();

			},
			closeRoutePopup() {
				this.$refs.popup_route.close();
			},
			machineShowOpen() {
				var that = this
				that.Request.request('getEquipment', {
					FWorkshopID: that.FWorkshopID
				}, (ret) => {

					if (ret.status == 200) {
						that.getEquipmentList = ret.data.ds

					}
				})

			},

			machineShowClose() {
				var that = this
				this.machineShow = false
				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;

				var name = that.MesBasicInfoList.length == 0 ? "未选" : '已选'

				uni.$emit('ResetModuleData_select', name);
				this.$emit('ResetModuleData_select', name);
			},
			closetow(item) {
				var that = this;
				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
				var oldMesBasicInfoLength
				var MesBasicInfo = {
					...that.$store.state.GuyueModule.MesBasicInfo
				};
				MesBasicInfo.warehouse = item;

				// 查找是否存在相同设备
				var index = that.MesBasicInfoList.findIndex(item =>
					item.warehouse.EquipmentID == MesBasicInfo.warehouse.EquipmentID
				);

				if (index == -1) {
					// 新增设备时的检查
					if (that.MesBasicInfoList.length >= 3) { // 修改条件为 >=3
						that.machineShow = false;
						that.modalshow = true;
						that.modaltitle = '提醒';
						that.modalcontent = '当前系统暂不支持超过3个机台';
						return; // 关键：阻止后续代码执行
					}
					if (that.MesBasicInfoList.length != 0) {
						oldMesBasicInfoLength = MesBasicInfo.ModuleData_select[MesBasicInfo.ModuleData_select.length - 1]
							.length - MesBasicInfo.ModuleData_select[0].length
					}
					var MesBasicInfo = {
						...that.$store.state.GuyueModule.latestMesBasicInfo
					};

					MesBasicInfo.warehouse = item;
					MesBasicInfo.ModuleData_select = this.$store.state.GuyueModule.moduleData_basic;

					that.MesBasicInfoList.push(MesBasicInfo);


				} else {
					// 已有设备的处理逻辑
					// if (that.MesBasicInfoList.length > 1) {
					if (that.MesBasicInfoList.length > 0) {


						if (that.MesBasicInfoList[index].Status.ClockStatusName == '下班打卡') {
							that.machineShow = false;
							that.modalshow = true
							that.modaltitle = '提示'
							that.modalcontent = `${that.MesBasicInfoList[index].warehouse.EquipmentName}机台请先下机再关闭`
							return; // 关键：阻止后续代码执行
						} else {

							console.log(that.MesBasicInfoList);

							if (that.MesBasicInfo.Status.ClockStatusName == '下班打卡') {
								that.modalshow = true
								that.modaltitle = '提示'
								that.modalcontent = '请先下班，再切换机台'
								return
							}
							if (index == 0) {
								that.MesBasicInfoList.splice(index, 1);
								if (that.MesBasicInfoList.length == 0) {
									MesBasicInfo = that.$store.state.GuyueModule.latestMesBasicInfo
									MesBasicInfo.ModuleData_select = this.$store.state.GuyueModule.moduleData_basic;
								} else {
									MesBasicInfo = that.MesBasicInfoList[0];
								}
							} else {
								MesBasicInfo = that.MesBasicInfoList[0];
								that.MesBasicInfoList.splice(index, 1);
							}
							console.log(MesBasicInfo);

						}
					} else {
						that.machineShow = true;
					}
				}
				// 以下代码只有在未触发 return 时才会执行
				uni.$emit('changeEquipment');
				that.$emit('changeEquipment');


				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfo',
					data: MesBasicInfo
				});
				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfoList',
					data: that.MesBasicInfoList
				});



				// 调用这个顺序执行的函数
				that.executeInOrder(MesBasicInfo, that.MesBasicInfoList, oldMesBasicInfoLength);
				// that.addClockStatus()
				// that.changeMesBasicInfoAll()
				// that.ClickchangeMesBasicInfo(MesBasicInfo, that.MesBasicInfoList, oldMesBasicInfoLength);

			},
			// 假设这三个方法都是异步操作并返回Promise
			async executeInOrder(MesBasicInfo, MesBasicInfoList, oldMesBasicInfoLength) {
				var that = this
				try {
					// 等待第一个方法执行完成
					await that.addClockStatus();
					// 第一个方法完成后，执行第二个
					await that.changeMesBasicInfoAll();
					// 第二个方法完成后，执行第三个
					await that.ClickchangeMesBasicInfo(MesBasicInfo, MesBasicInfoList, oldMesBasicInfoLength);


				} catch (error) {
					console.error("执行过程中出错:", error);
					// 可以根据需要处理错误，比如中断执行或执行备选逻辑
				}
			},



			changeEquipment() {
				var that = this
				that.machineShow = !that.machineShow
				// if (that.MesBasicInfo.Status.ClockStatusName != '下班打卡') {
				// 	that.machineShow = !that.machineShow
				// } else {
				// 	that.modalshow = true
				// 	that.modaltitle = '提示'
				// 	that.modalcontent = '请先下班，再切换机台'
				// }
			},
			ToLevel(data, idx) {
				var that = this
				if (idx == 0) {
					return
				}
				this.initData = JSON.parse(JSON.stringify(that.$store.state.GuyueModule.MesBasicInfo.ModuleData_select));
				this.initObj = data

				var obj = this.initData[this.initData.length - 1]


				this.clearAfterCondition(this.initData, (item) => item.APPFunID == data.APPFunID);

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: this.initData
				})
				const newEquipment = {
					...this.$store.state.GuyueModule.MesBasicInfo,
					ModuleData_select: this.initData
				};
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfo',
					data: newEquipment
				})

				console.log(this.$store.state.GuyueModule.ModuleData_select);
				uni.$emit('changeLevel', this.initData, this.initData[this.initData.length - 1], obj);
				this.$emit('changeLevel', this.initData, this.initData[this.initData.length - 1], obj);
			},

			clearAfterCondition(data, condition) {
				// 遍历数组找到第一个满足条件的元素的索引  
				for (let i = 0; i < data.length; i++) {
					if (condition(data[i])) {

						// 如果找到，则截断数组  
						data.splice(i); // 注意：splice 会修改原数组  
						break;
					}
				}
			},


			// onNetworkStatusChange(res) {
			// 	console.log(res);
			// 	if (res.isConnected) {
			// 		this.isConnected = true;
			// 		// 当网络连接后的逻辑  
			// 		uni.showToast({
			// 			title: "网络已连接"
			// 		});
			// 	} else {
			// 		this.isConnected = false;
			// 		// 当网络断开后的逻辑  
			// 		uni.showToast({
			// 			title: "网络已断开"
			// 		});
			// 		// 可以在这里处理网络断开后的逻辑，如显示提示信息、停止网络请求等  
			// 	}
			// },

			dateFormat(date, fmt) {
				date = new Date(date)

				var a = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				var o = {
					'Y': date.getFullYear(),
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					'S': date.getMilliseconds(), // 毫秒
					'w': date.getDay(), // 周
					'W': a[date.getDay()], // 大写周
					'T': 'T'
				}
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				for (var k in o) {
					if (new RegExp('(' + k + ')').test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[
							k]).length)))
					}
				}
				return fmt
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: CustomFont;
		src: url('/static/assets/css/moldfont/iconfont.ttf');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 24px;
	}

	.m-framework {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.workbench_top {

			padding: 0.5% 2%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.workbench_left1 {
				display: flex;
				align-items: center;
				overflow: hidden; // 隐藏超出部分
				width: 70%; // 控制整体宽度

				// 方案1的滚动容器样式
				.scroll-container {
					white-space: nowrap; // 禁止换行
					width: 100%;

					.workbench_left_view {
						display: inline-block; // 改为行内块元素
						min-width: 120px; // 最小宽度
						padding: 0 20px;
						text-align: center;

					}

					image {
						display: inline-block; // 改为行内块元素
						width: 30px;
						height: 30px;
					}

					.active-tab {
						color: #51d0d0 !important; // 激活字体颜色
						border-bottom: 3px solid #51d0d0; // 下边框
						padding-bottom: 8px; // 调整下边框位置
					}
				}

			}

			.workbench_left {
				display: flex;
				align-items: center;

				.workbench_u-tag {
					height: 100%;
					display: flex;
					align-items: center;
					width: fit-content;
					margin-right: 6px;
				}

				.workbench_u-tag:first-child ::v-deep .u-tag__close {
					display: none !important;
				}

				.workbench_u-tag ::v-deep .u-tag__close--large {
					width: 35px !important;
					height: 35px !important;
				}

				// .workbench_u-tag ::v-deep .u-tag__close {
				// 	transform: scale(0.7) !important;
				// }

				.tag-close {
					position: absolute;
					right: 12px;
					top: 50%;
					transform: translateY(-50%);
				}

			}



			.workbench_dispatch_right {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 2%;

				.u-button {
					width: fit-content;
					margin: 0 3px;
					height: 30px;
				}
			}
		}



		&_main {
			flex: 1;
			background-color: #e7e7e7;
			overflow: hidden;

			&_box {
				flex: 1;
				padding: 20px;
				width: 100%;
				height: 100%;

				&-border {
					border: 2px solid #fff;
					width: 100%;
					flex: 1;
					padding: 10px;
					height: 100%;
					overflow: hidden;
				}
			}

		}



		&_bottom {

			.bottomText {
				font-size: 15px;
				color: #fff;
			}

			&-company {
				text-align: center;
				flex: 1;
			}
		}
	}



	.routePopup {
		padding-top: var(--status-bar-height);
	}

	// 设备产线弹窗
	.popup_equipment_container {
		width: 100%;
		height: 40vh;
		background: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		padding: 16px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	/* 产线选择区域 */
	.line-container {
		flex: 1;
		padding-top: 12px;
	}

	/* 产线网格 */
	.line-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
		gap: 12px;
		justify-content: center;
	}

	/* 产线方块 */
	.line-item {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dbb56a;
		color: white;
		font-size: 16px;
		font-weight: bold;
		padding: 12px 0;
		border-radius: 8px;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
		transition: transform 0.2s ease-in-out;
	}

	/* 点击反馈 */
	.line-item:active {
		transform: scale(0.95);
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	}


	.u-popup_view {
		height: 50vh;
		padding: 1%;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		overflow-y: auto;
		gap: 1%;
		box-sizing: border-box;


		::v-deep text {
			color: #fff;
			background-color: #d6a960;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			line-height: 1;
			flex: 0 0 calc(25% - 1%);
			margin: 0;
			font-size: 15px !important;
			min-width: 0;
			min-height: 50px;
			word-break: break-word;
			box-sizing: border-box;
			border-radius: 2%;
		}
	}

	.RightBox {
		min-width: 30vw;
		padding: 0 2% 0 0;


		.RightBoxView {

			font-size: 15px;
			color: #fff;
			display: flex;
			box-sizing: border-box;
			justify-content: flex-end;
			flex-wrap: nowrap;
			align-items: center;

			.navRight_button {
				min-width: 50px;
				width: fit-content;
				height: 35px;
				margin-left: 5px;

			}

			.CancelBtn {
				align-items: center;
				text-align: center;
				display: flex;
				justify-content: center;
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
				height: 35px;
				min-height: 35px;
				min-width: 50px;
				width: fit-content;
				border-radius: 4px;
				font-size: 14px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				margin-left: 5px;

				&:active {
					background-color: #e6f7f7;
					transform: translateY(1px);
				}
			}


		}

	}


	/* 局部样式（在需要居中的页面中添加） */
	::v-deep .u-modal__content {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.popup-content {
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 40vw;
		max-width: 500px;
		padding: 10px 20px 10px 20px;
		font-size: 12px;
		border-radius: 4px !important;
		overflow: hidden;

	}



	.popup-content .popup-content_close {
		position: absolute;
		top: 0;
		right: 0;
		width: 28px;
		height: 28px;
		font-weight: 600;
	}

	.popup-content .title {
		font-size: 15px;
		font-weight: 600;
		text-align: center;
	}

	.popup-content .popup-content_desc {
		margin: 24px 0;
		text-align: center;
		color: #999;
	}

	.popup-content .contentView {
		font-size: 15px;
		display: flex;
		justify-content: center;
		padding: 15px 0;
	}

	.popup-content .check {
		zoom: .9;
		font-size: 13px;
		color: #999;
	}


	.popup-content .btnBox {

		.u-button {
			width: 44% !important;
		}
	}


	.popup-content .btnBox .u-button {
		width: 44% !important;
	}

	.wrapper {
		::v-deep .u-sticky {
			display: flex;
			justify-content: center;
		}

		::v-deep .u-tabs__wrapper__nav__item {
			padding: 0 32px;
		}
	}

	.workbench_right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		width: 30%;

		.workbench_right_3 {
			height: 30px;
			margin: 0 0 0 3px;
			width: fit-content;
		}

	}


	.leftPopup_u-tag:first-child ::v-deep .u-tag__close {
		display: none !important;
	}

	.leftPopup_u-tag {
		width: 90% !important;
		height: 40px;
		display: flex !important;
		justify-content: center !important;
	}

	/* 深度选择器尝试影响内部文本元素 */
	.leftPopup_u-tag ::v-deep .u-tag__text {
		width: 100%;
		text-align: center;
	}

	.loading-page {
		background-color: rgba(0, 0, 0, 0.6) !important;
		z-index: 12080 !important;
		/* 确保大于 u-popup 的 z-index */

	}


	.u-modal__button-group__wrapper {
		height: 35px !important;
	}

	.uni-dialog-button {
		height: 35px !important;
	}

	.u-modal__title {
		padding-top: 10px !important;
		color: red !important;
	}

	.u-modal__content {
		padding: 20px !important;
	}

	.u-modal__button-group__wrapper {
		height: 35px !important;
	}
</style>